<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/mobile-header.jsp"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0">
<title>商品详情</title>
<link href="${ctxStatic }/site/themes/default/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="${ctxStatic }/site/themes/default/css/css.css" rel="stylesheet" type="text/css">
<link href="${ctxStatic }/site/themes/default/css/mobileui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${ctxStatic }/site/themes/default/js/jQuery.js"></script>
<script type="text/javascript" src="${ctxStatic }/site/themes/default/js/swipe.js"></script>
<script type="text/javascript" src="${ctxStatic }/site/themes/default/js/zepto.js"></script>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
<script src="${ctxStatic}/site/themes/default/js/hideOptionMenu.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){
	$("#move").mouseover(function(){
		$("#moveshow").addClass("show");
		$("#moveUl").show();
	});
	
	$("#move").mouseout(function(){
		$("#moveshow").removeClass("show");
		setInterval("$('#moveUl').hide();",5000);
		
	});
});

function addShoppingCart(){
	$.get("${ctxMobileSite}/shopping/addshoppingCart?pid=${product.id}&uid=${product.user.id}", function(data){
		$(".overlay").css({'display':'block','opacity':'0.8'});
		
		$(".showbox").stop(true).animate({'margin-top':'80%','opacity':'1'},10);
		
		setTimeout(function(){
			
			$(".showbox").stop(true).animate({'margin-top':'80%','opacity':'0'},10);
			
			$(".overlay").css({'display':'none','opacity':'0'});
			
		},1000);
	});
}

function createPay(){
	document.getElementById('light').style.display='block';
	document.getElementById('fade').style.display='block';
}

function willPay(){
	var num=$("#count").val();
	window.location.href="${ctxMobileSite}/shopping/createPay?productId=${product.id}&uid=${uid}&wechatId=${wechatId}&productNumber="+num;
}

function checkCount(maxcount){
	var count=parseInt($("#count").val());
	if(count<=0){
		$("#count").val(1);
	}
	if(count>parseInt(maxcount)){
		$("#count").val(maxcount);
	}
}

function add(maxcount){
		var count=parseInt($("#count").val());
		console.log(maxcount);
		if(count<parseInt(maxcount)){
			$("#count").val(count+1);
		}else{
			$("#count").val(maxcount);
		}
	}

function reduce(){
	var count=parseInt($("#count").val());
	if(count>1){
		$("#count").val(count-1);
	}else{
		$("#count").val(1);
	}
}

</script>
<style type="text/css">
.showbox {
	position: fixed;
	top: 0;
	left: 65%;
	opacity: 0;
	filter: alpha(opacity=0);
	margin-left: -80px;
}
*html .showbox, *html .overlay {
	position: absolute;
top:expression(eval(document.documentElement.scrollTop));
}
#AjaxLoading div.loadingWord {
	width: 180px;
	height: 30px;
	line-height: 30px;
	background: #000;
	border-radius: 3px;
	box-shadow: 2px 2px 5px #999;
	color: #FFF;
	text-align: center
}


/*弹出层样式*/
.rule-content {
	position: fixed;
	bottom: 0px;
	z-index: 1000000;
	background-color: #ffffff;
	border: 1px solid #eee;
	width:100%;
	height: 245px;
	overflow-x: hidden;
}
.rule-info {
	padding:10px 0%;width:100%;
	box-sizing: border-box;
}
.rule-info-text {
	display: inline-block;
	margin-left: 15px;
	height: 50px;
	position: relative;
}
.rule-info-name {
	width: 150px;
	height: 30px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.rule-price {
	position: absolute;
	bottom: 0px;
}
.rule-sku {
	margin-top: 5px;
	overflow: auto;
}
.rule-sku li {
	border: 1px solid #E0DEDE;
	background-color: #FFFFFF;
	float: left;
	padding: 5px;
	margin-left: 5px;
	margin-right: 5px;
	min-width: 20px;
	text-align: center;
	cursor: pointer;
	font-size: 14px;
	color: #333333;
	margin-bottom: 5px;
}
.rule-sku li.border {
	border: 1px solid #ff7e00;
	color: #ff7e00;
}
.rule-sku-name {
	margin-left: 5px;
}

.close-rule {
	background: url(${ctxStatic }/site/themes/default/images/close.png) no-repeat scroll rgba(0, 0, 0, 0);
	background-size: 15px 15px;
	width: 15px;
	height: 15px;
	float: right;
	cursor: pointer;
	display: inline-block;
}
.black_overlay {
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 1001;
	-moz-opacity: 0.8;
	opacity: .80;
	filter: alpha(opacity = 80);
}

.self_mui_number .i_mui_number {
	width: 200px !important;
	min-width: 100px !important;
	border: 0px;
}
.self_mui_number .i_mui_input {
	border-top: 1px solid #E0DEDE !important;
	border-bottom: 1px solid #E0DEDE !important;
	background: #ffffff !important;
	color: #000000 !important;
	width: 36px !important;
	height: 28px;
	-webkit-appearance: none;
	-moz-appearance: none;
}
/*圆角按钮*/
.anniu2 {
	clear: both;
	display: inline-block;
	zoom: 1;  /* zoom和*display属性为了兼容IE7 */
*display:inline;
	vertical-align: baseline;
	margin: 0 3%;
	outline: none;
	cursor: pointer;
	text-align: center;
	vertical-align: central;
	font: 19px/100% 'ElegantIcons';
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .3em;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	padding: .3em .8em .6em;
}


.red {  /* 红色样式类 */
	color: #fff;
	background: #c92626;
	background: -webkit-gradient(linear, left top, left bottom, from(#fc2f2f), to (#c92626));
	background: -moz-linear-gradient( top, #fc2f2f, #c92626);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fc2f2f', endColorstr='#c92626');
}
.red:active {  /* 红色鼠标激活样式类 */
	color: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#c92626), to(#fc2f2f));
	background: -moz-linear-gradient( top, #c92626, #fc2f2f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c92626', endColorstr='#fc2f2f');
}
#cancel {
	float: right;
	margin-right: 10px;
}
</style>
</head>
<body>
<div class="gridContainer clearfix" id="product">
<div id="LayoutDiv1" style="min-height: 453px;"> 
  <!--
	幻灯片管理
	-->
  <div style=" clear:both;width:100%;overflow-X: hidden;margin-top:50px;">
  
  		<header>    
		    <ul class="menu">  
		    <span style=" font-size:18px; color:#FFF" class="left biaoti icon_left"   onclick="history.back(-1)" >商品详情</span>
					<li id="moveshow" > <a href="#" id="move"  ><span class="icon_menu right"></span></a>
						<ul id="moveUl"  style="display:none;">
							<jsp:include page="./right.jsp"></jsp:include>
						</ul>
					</li>			
				</ul>
		    </header>
  
    <div style="-webkit-transform:translate3d(0,0,0);position:relative;">
      <div id="banner_box" class="box_swipe" style="visibility: visible;">
        <ul style="list-style: none; width: 4480px; transition: 500ms; -webkit-transition: 500ms; -webkit-transform: translate3d(-1280px, 0, 0);">
        	<c:forEach items="${product.productImg }" var="productImg">
          		  <li style="width: 640px; display: table-cell; vertical-align: top;"> <a onclick="${ctxMobileSite }/viewImgs/${product.id}"> <img src="${ctxUser}/product/${productImg.img }" alt="1" style="width:100%;"> </a> </li>
        	</c:forEach>
        	
        </ul>
        <ol>
     	   <c:forEach items="${product.productImg }"		var="productImg"  varStatus="var" >
        	  <li   ${var.count eq 0?'class="on"':'' } ></li>
       	  </c:forEach>
        </ol>
        <c:if test="${empty product.productImg}">
        	<span style="width: 640px; display: table-cell; vertical-align: top;"> 
        		<a onclick="${ctxMobileSite }/viewImgs/${product.id}"> 
        			<img src="${ctxUser }/product/${product.indexPic}" alt="1" style="width:100%;"> </a> 
        	</span>
        </c:if>
      </div>
	      <div class="title">${product.name }</div>
    </div>
    <script>
		$(function(){
			new Swipe(document.getElementById('banner_box'), {
				speed:500,
				callback: function(){
					var lis = $(this.element).next("ol").children();
					lis.removeClass("on").eq(this.index).addClass("on");
				}
			});
		});
	</script>
    <section class="clear">
      <%-- <div class="zhaiyao">${product.description }</div> --%>
      <div class="bgbaise" >
        <p><span class="font18">会员价</span> 
        	<span class="font20red">￥<fmt:formatNumber value="${product.price/100 }" pattern="0.00"/></span>&nbsp;&nbsp;
        	<del>市场价：￥<fmt:formatNumber minFractionDigits="2"  maxFractionDigits="2" value="${product.sourcePrice/100}" type="number" pattern="0.00"/></del>
        </p>
        <p>剩余数量：
        	<c:if test="${product.amount-product.sellCount > 0}">
        		<c:out value="${product.amount-product.sellCount}" default="0"></c:out>件
        	</c:if>
        	
        	<c:if test="${product.amount-product.sellCount <= 0}">
        		已售完
        	</c:if>
        	
        </p>
      </div>
      <div class="guige clear">
        <p style="padding-bottom:10px;" class="font16">
        	<span>返利积分</span>
        	<span class="right" style="color:red"><fmt:formatNumber value="${product.score/1000}" pattern="##.###"  minFractionDigits="3"/></span>
        </p>
        <div style="padding-top:10px; border-top:1px #eee solid">
        	<span class="font16">最多可使用积分</span>
        	<span class="right" style="color:red"><fmt:formatNumber value="${product.consumeScore/1000}" pattern="##.###"  minFractionDigits="3"/></span>
        </div>
      </div>
      <div class="guige">      	
      	<span class="font18">图文详解</span>    
      </div> 
        <div style="font-size: 13px; padding:15px;line-height: 20px;background-color: #f8f8f8;min-height: 23%;"> ${product.detail }</div>
    </section>
    <footer class="tbl-type detail-tbn2"  style="position: fixed; left: 0px; bottom: 0px; z-index: 10; display: table;">
        <div class="tbl-cell"> 
        	<%-- <a class="btn-buy" href="${ctxMobileSite}/shopping/createPay?productId=${product.id}&uid=${uid}&wechatId=${wechatId}"  >
        	立即购买
        	</a>
        	<c:if test="${product.amount-product.sellCount > 0}">
	        	<input onclick="javascript:window.location.href='${ctxMobileSite}/shopping/createPay?productId=${product.id}&uid=${uid}&wechatId=${wechatId}&productNumber=1'" class="anniu btn-buy" type="submit" value="立即购买"  style="padding: 5% 18% 5% 18%; margin:5%;color: #fff;font-size: 16px;" />
        	</c:if>
        	 --%> 
        	<c:if test="${product.amount-product.sellCount > 0}">
	        	<input onclick="createPay()" class="anniu btn-buy" type="submit" value="立即购买"  style="padding: 5% 18% 5% 18%; margin:5%;color: #fff;font-size: 16px;" />
        	</c:if>
        	<c:if test="${product.amount-product.sellCount <= 0}">
	        	<input onclick="alert('商品已售完！');" class="anniu btn-buy" type="submit" value="立即购买"  style="padding: 5% 18% 5% 18%; margin:5%;color: #fff;font-size: 16px;" />
        	</c:if>
        </div>
        
        <div class="tbl-cell"> 
        	<c:if test="${product.amount-product.sellCount > 0}">
	        	<input onclick="javascript:addShoppingCart()" class="anniu btn-cart" type="submit" value="加入购物车"  style="padding: 5% 17% 5% 17%; margin:5%;color: #fff;font-size: 16px;" />
        	</c:if>
        	
        	<c:if test="${product.amount-product.sellCount <= 0}">
	        	<input onclick="alert('商品已售完！');" class="anniu btn-cart" type="submit" value="加入购物车"  style="padding: 5% 17% 5% 17%; margin:5%;color: #fff;font-size: 16px;" />
        	</c:if>
       		<!-- <a href="javascript:addShoppingCart()" class="btn-cart">
       			加入购物车
       		</a>  -->
       	</div>
    </footer>
  </div>
    <div id="AjaxLoading" class="showbox"  style="left:45%;" >
		<div class="loadingWord">添加成功！！</div>
	</div>
	
	<div id="fade" class="black_overlay"> </div>
	<div class="rule-content" style="display:none;margin-top:15px; width:85%" id="light">
		<div class="rule-info">
			<img src="${ctxUser }/product/${product.indexPic}" alt="1"  style="width:50px;height:50px;float:left;margin-left: 10px;">
			<div class="rule-info-text">
                 <div class="rule-info-name">${product.name }</div>
                 <div class="orange_text rule-price">
	                 <label style="float:left">¥ </label>
	                 <span class="now_price" style="font-size:12px;float:right"><fmt:formatNumber value="${product.price/100 }" pattern="0.00"/></span>
                 </div>
            </div>
            <div  id="cancel" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';"> <i class="close-rule"></i></div>
        </div>
        <div class="rule-info" style="border:0;margin-left:2%;">
            <div class="num_wrap">
	            <div style="display:inline-block;float:left;margin-top:10px;">选择数量:&nbsp;&nbsp;</div>
	            <div style="margin-bottom:20px;float:left;">
		             <div id="i_mui_number" class="self_mui_number" style="margin-left:5px;display:inline-block;margin-top:5px;">
			             <div class="i_mui_number i_mui_light i_mui_blue">
				             <div onclick="reduce(${product.amount-product.sellCount})" class="i_mui_number_cut i_mui_button">－</div>
				             	<input type="number" id="count" name="i_mui_number" class="i_mui_number_input i_mui_input" value="1" >
				             <div onclick="add(${product.amount-product.sellCount})"  class="i_mui_number_add i_mui_button">＋</div>
			             </div>
		             </div>
	            </div>
	        </div>
        </div>
        <div style="margin-left:15px;margin-bottom:5px;clear:both">
        	<span class="stockNum">剩余数量：<c:out value="${product.amount-product.sellCount}" default="0"></c:out>件</span>
        </div>
        <div class="anniu2 red" style="bottom:10px; position:absolute;width:85%;" onclick="willPay()">我要购买</div>
    </div>
	
</div>
<div class="jszch" style="margin-bottom:60px;">技术支持：<a href="http://www.hdzhx.com/boxin/index.html" >智讯互联</a></div>
</div>
</body>
</html>
